<template>
	<div class="basic-info">
		<table>
			<tr>
				<td class="table-key">
					<span>昵称</span>
				</td>
				<td class="table-value">
					  <el-input v-model="input" style="width: 240px" placeholder="请输入昵称" />
				</td>
			</tr>
			<tr>
				<td class="table-key">
					<span>性别</span>
				</td>
				<td class="table-value">
					<el-radio-group v-model="gender" class="ml-4">
					      <el-radio value="1" size="large">男</el-radio>
					      <el-radio value="2" size="large">女</el-radio>
						  <el-radio value="3" size="large">保密</el-radio>
					</el-radio-group>
				</td>
			</tr>
			<tr>
				<td class="table-key">
					<span>生日</span>
				</td>
				<td class="table-value">
					    <el-time-picker v-model="time" placeholder="选择日期" />
				</td>
			</tr>
			<tr>
				<td class="table-key">
				</td>
				<td class="submit">
					<el-button type="danger">提交</el-button>
				</td>
			</tr>
		</table>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const gender = ref('1')
const time = ref()
let input = ref("")
</script>

<style lang="less" scoped>
	.basic-info{
		background-color: #fff;
		width: 500px;
		height: 250px;
		table{
			padding-top: 30px;
			tr{
				.table-key{
					padding-left: 80px;
					font-weight: 700;
				}
				.table-value{
					
				}
				.submit{
					padding-top: 20px;
					padding-left: 100px;
				}
			}
		}
	}
</style>